<template>
  <el-dialog title="添加试卷" :visible="dialogVisible" @close="handleClose()" width="80%">
    <div style="height:600px;" class="scrollbar">
      <el-scrollbar style="height:100%">
        <el-row :gutter="24">
          <el-col :span="6">
            <el-form :model="quForm" ref="form2">
              <el-form-item label="卷名" :label-width="formLabelWidth">
                <el-input v-model="paper.paperName" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="题库" :label-width="formLabelWidth">
                <el-select placeholder="请选择题库" v-model="paper.quBankId" @change="getQuesitonByid(paper.quBankId)">
                  <el-option v-for="item in quBank" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="试题总数" :label-width="formLabelWidth">
                <el-input v-model="paper.questionNum" autocomplete="off" :disabled="true"></el-input>
              </el-form-item>
              <el-form-item label="及格分" :label-width="formLabelWidth">
                <el-input v-model="paper.passMark" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="试卷总时长(分)" :label-width="formLabelWidth">
                <el-input v-model="paper.examTotalSecond" autocomplete="off"></el-input>
              </el-form-item>
              <el-form-item label="试卷备注" :label-width="formLabelWidth">
                <el-input v-model="paper.paperMark" autocomplete="off" type="textarea"></el-input>
              </el-form-item>
            </el-form>
          </el-col>
          <el-col :span="18">
            <el-table :data="tableData" border @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"> </el-table-column>
              <el-table-column prop="quBank.quBankName" label="所属题库">
              </el-table-column>
              <el-table-column prop="content" label="题目"> </el-table-column>
            </el-table>
          </el-col>
        </el-row>

        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="savePaper()">确 定</el-button>
        </div>
      </el-scrollbar>
    </div>

  </el-dialog>
</template>
  
<script>
import { queryBankAll } from '@/api/common/common'
import { saveFastPaper } from "@/api/onlineQuestion/paperQuestion.js";
export default {
  props: {
    childDialog: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      tableData: [],
      quForm: {},
      quTypes: [],
      quLevel: [],
      selType: 0,
      value: "",
      paper: {
        questionNum: "",
        paperName: "",
        questionNum: 0,
        examTotalSecond: 0,
        passMark: 0,
        paperMark: "",
        quBankId: "全部",
        quIds: [],
      },
      quBank: [],
      formLabelWidth: "120px",
      dialogVisible: false,
    };
  },
  mounted() { },
  methods: {
    //新增试卷
    savePaper() {
      saveFastPaper(JSON.stringify(this.paper)).then((res) => {
        if (res.code == 200) {
          //关闭表单
          this.handleClose();
          //刷新父页面
          this.$parent.queryPaperAll()
        }
      }).catch(res => {
        this.$message({
          type: "info",
          message: "保存失败",
        });
      });
    },
    //显示弹窗
    show() {
      this.dialogVisible = true;
      //获取题库数据
      this.queryQuBankSel();
    },
    //关闭弹窗
    handleClose() {
      this.dialogVisible = false;
      this.clearFrom();
    },
    //清空表单
    clearFrom() {
      this.paper.quBankId = 1;
      this.quBank = [];
    },
    //获取题库下拉框
    queryQuBankSel() {
      queryBankAll(JSON.stringify({})).then(res => {
        for (let s of res.data) {
          this.quBank.push({
            value: s.quBankId,
            label:s.quBankName,
          });
        }
      }).catch((e) => {
        console.log(e);
      });
    },
    //获取题库试题
    queryQuestion(quBankId) {
      let params = {};
      params.current = 1;
      params.size = 10;
      params.quBankId = quBankId;
      this.$http({
        url: "/qu/queryAll",
        data: JSON.stringify(params),
        method: "post",
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
      }).then((res) => {
        this.tableData = res.data.records;
      });
    },

    //下拉框选择事件
    getQuesitonByid(quBankId) {
      this.paper.quBankId = quBankId;

      this.paper.examTotalSecond = 0;
      //刷新题库题目
      this.queryQuestion(quBankId);
    },
    //checkBox事件
    handleSelectionChange(row) {
      for (let item in row) {
        console.log(row[item].quId)
        if (this.paper.quIds.indexOf(row[item].quId) == -1) {
          this.paper.quIds.push(row[item].quId);
          console.log(this.paper.quIds);
        }
      }
      this.paper.questionNum = row.length;
    },
  },
};
</script>
<style scoped></style>